<script setup lang="ts">
import {
  ElTable,
  ElTableColumn,
  ElButton,
  ElCard,
  // ElInput,
  ElSpace,
  ElMessage,
  ElPopconfirm,
} from "element-plus";
import RoleForm from "./component/RoleForm.vue";
import RolePermissionForm from "./component/RolePermissionForm.vue";
import { onMounted, ref, watch } from "vue";
import { roleApi } from "@/api/admin/role";
import { debounce, deepClone } from "@/utils";
import { MyIcon } from "@/components/MyIcon";
import { menuApi } from "@/api/admin/menu";
import { permissionApi } from "@/api/admin/permission";

const rolePermissionFormRef = ref<any>(null);

const params = ref({
  name: "",
});

const menuTree = ref<any>([]);

const permissionMetaTree = ref<any>([]);

const RoleFormRef = ref<any>(null);

const roleTable = ref<any>([]);

// 获取角色数据
const getRole = async () => {
  const ret = await roleApi.getRoleApi(params.value);
  if (ret.code === 200) {
    roleTable.value = ret.data;
  }
};

// 获取菜单树数据
const getMenuTree = async () => {
  const menuTreeRes = await menuApi.getRoutesMenuTreeApi();
  menuTree.value = menuTreeRes;
};

// 获取权限树数据
const getPermissionMetaTree = async () => {
  const ret = await permissionApi.permissionMetaTree();
  if (ret.code === 200) {
    permissionMetaTree.value = ret.data;
  } else {
    ElMessage.error("获取权限失败");
    throw new Error("获取权限失败");
  }
};

onMounted(() => {
  getPermissionMetaTree();
  getRole();
  getMenuTree();
});

const debounceQuery = debounce(() => {
  getRole();
}, 500);

watch(
  () => params.value.name,
  () => {
    debounceQuery();
  }
);

// 获取角色菜单
const getRoleMenu = async (roleId: string) => {
  const ret = await roleApi.getRoleMenuApi([roleId]);
  if (ret.code === 200) {
    return ret.data;
  } else {
    ElMessage.error("获取角色菜单失败");
    throw new Error("获取角色菜单失败");
  }
};

// 获取角色权限
const getRolePermission = async (roleId: string) => {
  const ret = await roleApi.getRolePermissionApi(roleId);
  if (ret.code === 200) {
    // console.log(ret.data);
    return ret.data;
  } else {
    ElMessage.error("获取角色权限失败");
    throw new Error("获取角色权限失败");
  }
};

// const handleQuery = () => {
//   console.log("查询");
// };

// 权限
const handleMenuPermission = async (row: any) => {
  const newRow = deepClone(row);
  const rolePermissionRes = await getRolePermission(newRow.id);
  // console.log(rolePermissionRes);
  rolePermissionFormRef.value.open(newRow.id, rolePermissionRes);
};
const handleAdd = () => {
  RoleFormRef.value.open();
};
const handleEdit = async (row: any) => {
  const newRow = deepClone(row);
  // console.log(newRow.id);
  const roleMenu = await getRoleMenu(newRow.id);
  newRow.menus = roleMenu;
  RoleFormRef.value.open(newRow);
};
const handleDel = async (id: string) => {
  const ret = await roleApi.removeRoleApi(id);
  if (ret.code === 200) {
    ElMessage.success("删除成功");
    getRole();
  } else {
    ElMessage.error(ret.data.msg);
  }
};
</script>

<template>
  <div>
  <RolePermissionForm
    ref="rolePermissionFormRef"
    :permissionMetaTree="permissionMetaTree"
  />
  <RoleForm :menuTree="menuTree" ref="RoleFormRef" @update="getRole" />
  <el-card shadow="never">
    <div class="role-top">
      <div class="role-top-left">
        <el-button @click="getRole" type="" icon="Refresh" />
        <el-button @click="handleAdd" v-per="'role_save'" type="primary">添加</el-button>
        <!-- <el-button type="primary">批量修改</el-button>
        <el-button type="danger">批量删除</el-button> -->
      </div>
      <div class="role-top-right">
        <!-- <el-input clearable v-model="params.name" placeholder="请输入" /> -->
      </div>
    </div>
  </el-card>
  <el-table
    show-overflow-tooltip
    max-height="400"
    :data="roleTable"
    style="width: 100%"
    row-key="id"
  >
    <el-table-column type="selection" width="55" />
    <el-table-column align="center" prop="name" label="角色名称"></el-table-column>
    <el-table-column align="center" prop="remark" label="角色备注"></el-table-column>
    <el-table-column align="center" label="是否启用"></el-table-column>
    <el-table-column align="center" prop="updateTime" label="最近更新"></el-table-column>
    <el-table-column align="center" label="操作">
      <template #default="scope">
        <el-space>
          <el-button link v-per="'role_update'" @click="handleEdit(scope.row)" type="primary" size="small">
            <MyIcon color="#409EFF" icon="el:EditPen"
          /></el-button>
          <el-button
            link
            v-per="'role_permissionSave'"
            @click="handleMenuPermission(scope.row)"
            type="primary"
            size="small"
          >
            <MyIcon color="#409EFF" icon="el:Operation"
          /></el-button>
          <el-popconfirm
            title="确定要删除吗？"
            confirm-button-text="删除"
            cancel-button-text="取消"
            confirm-button-type="danger"
            cancel-button-type="info"
            @confirm="handleDel(scope.row.id)"
            :hide-after="0"
          >
            <template #reference>
              <el-button v-per="'role_remove'" link type="danger" size="small">
                <MyIcon color="#F56C6C" icon="el:Delete"
              /></el-button>
            </template>
          </el-popconfirm>
        </el-space>
      </template>
    </el-table-column>
  </el-table>
</div>
</template>
<style scoped lang="less">
.role-top {
  display: flex;
  justify-content: space-between;
}
</style>
